<template>
  <view class="appDrainage-box" v-if="isShow">
    <view class="box" :style="boxStyle">
      <view class="top">
        新任务上线，下载app即送319元羊奶粉代金券及100积分
        <view class="yuan"></view>
      </view>
      <view class="button" @click="submitSendMessage">我知道了</view>
    </view>
  </view>
</template>

<script>
/**
 * app 引流
 */
export default {
  name: 'appDrainage',
  data() {
    return {
      boxData: {},
      boxStyle: '',
      isShow: false
    };
  },
  created() {
  },
  methods: {
    init() {
      this.isShow = true
      this.$nextTick(() => {
        this.boxStyle = `width: ${this.boxData.width}px; height: ${this.boxData.height}px; top: ${this.boxData.top}px; left: 50%;`
      })
    },
    submitSendMessage() {
      this.isShow = false;
      this.$emit('submitSendMessage')
    }
  }
}
</script>

<style lang="scss">
.appDrainage-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

  .box {
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(-50%, 0%);
    border-radius: 32upx;
    // 设置阴影实现背景这招的效果
    box-shadow: 0 0 0 2000px rgba(28, 28, 28, 0.76);
    transition: all .4s linear;

    .top {
      width: 678upx;
      height: 160upx;
      box-sizing: border-box;
      padding: 22upx 25upx;
      text-align: center;
      font-size: 40upx;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(180deg, #6BE100 0%, #18AA59 100%);
      position: absolute;
      bottom: -294upx;
      left: 50%;
      transform: translate(-50%, 0%);
      border-radius: 20upx;
      border: 2upx dashed #fff;
    }

    .top::before {
      content: '';
      position: absolute;
      bottom: 160upx;
      width: 2upx;
      height: 110upx;
      background-color: #fff;
      left: 50%;
      transform: translate(-50%, 0%);
    }

    .top .yuan {
      width: 40upx;
      height: 40upx;
      background-color: rgba(255, 255, 255, .5);
      border-radius: 50%;
      position: absolute;
      bottom: 250upx;
      left: 50%;
      transform: translate(-50%, 0%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .top .yuan::before {
      content: '';
      width: 22upx;
      height: 22upx;
      border-radius: 50%;
      background-color: #fff;
    }

    .button {
      width: 300upx;
      height: 98upx;
      font-size: 48upx;
      color: #fff;
      line-height: 98upx;
      text-align: center;
      box-sizing: border-box;
      border-radius: 56upx;
      border: 2upx solid #fff;
      position: absolute;
      bottom: -498upx;
      left: 50%;
      transform: translate(-50%, 0%);
    }
  }
}
</style>
